import { FunctionalComponent as FC, inject, type Ref } from "vue"
import { useRoleStore } from "@/store"
// import useUtils from "../../hooks/useUtils"
import { switchData } from "../../utils"
import type { RoleState, CommonTypeItem } from "@/store/modules/role/types"

import "./index.less"
interface Prop {
  item: CommonTypeItem
  // code: string
}
interface DialogInject {
  addRoleForm: Ref<{name: string, description: string, permIds: number[]}>
  checkall: Ref<boolean>
  indeterminate: Ref<boolean>
  setCheckVal: (val: boolean) => void
  setIndetVal: (val: boolean) => void
}

const CompEnum: Record<string, [string, string, string]> = {
  "second": [
    "routerArr",
    "label-item-box",
    "first-level"
  ],
  "third": [
    "pageArr",
    "second-level",
    "second-content"
  ],
  "four": [
    "compArr",
    "third-level",
    ""
  ],
  "five": [
    "detailArr",
    "",
    "last-child-box"
  ]
}

const LabelItem: FC<Prop, any> = (props, ctx) => {
  const roleStore = useRoleStore()
  return DataItem(props.item, roleStore, ...CompEnum["second"])
}

const RenderItem = (item: CommonTypeItem) => {
  // const UtilsHooks = useUtils()
  const dialogState = inject<DialogInject>("dialogState")
  const handleChange = (val: boolean, item: CommonTypeItem) => {
    dialogState && switchData(val, item, dialogState)
  }
  return (
    <div class={getClassName(item)}>
      <a-checkbox 
        value={item.id} 
        v-model={item.checked} 
        indeterminate={item.indeterminate}
        onChange={(val: boolean) => handleChange(val, item)}
      >{item.label}</a-checkbox>
    </div>
  )
}

const DataItem = (item: CommonTypeItem, roleStore: RoleState, stateKey: string, outClassName: string, inClassName: string) => {
  return stateKey && (
    <div class={item.level !== 4 ? outClassName : inClassName}>
      {
        roleStore[stateKey][item.code].map((t: CommonTypeItem) => {
          if (item.level === 3) {
            return (
              <>
                {DataItem(t, roleStore, ...getPropsData(t))}
              </>
            )
          } else {
            if (item.level !== 4) {
              return (
                <div class={inClassName} data-index={item.level}>
                  {item.level !== 3 && RenderItem(t)}
                  {DataItem(t, roleStore, ...getPropsData(t))}
                </div>
              )
            } else {
              return (
                <>
                  {RenderItem(t)}
                </>
              )
            }
          }
        })
      }
    </div>
  )
}

const getPropsData = (item: CommonTypeItem): [string, string, string] => {
  let config: [string, string, string] = [] as unknown as [string, string, string]
  switch (true) {
    case item.level === 2:
      config = [...CompEnum["third"]]
      break;
    case item.level === 3:
      config = [...CompEnum["four"]]
      break;
    case item.level === 4:
      config = [...CompEnum["five"]]
      break;
    default:
      break;
  }
  return config
}

const getClassName = (item: CommonTypeItem) => {
  let classname = ""
  switch (item.level) {
    case 2:
      classname = "first-child-item"
      break;
    case 3:
      classname = "second-child-item"
      break;
    case 4:
      classname = "third-child-item"
      break;
    case 5:
      classname = "last-child-item"
      break;
    // case 5:
    //   classname = "last-child-item"
    //   break;
    default:
      classname = ""
      break;
  }
  return classname
}

export default LabelItem